<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <!--header部分 start -->
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="资源编号">
                <a-input v-model="queryParam['flOtherResour.wl_resourNum']" placeholder="请输入资源编号"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="规格型号">
                <a-input v-model="queryParam['flOtherResour.wl_specModel']" placeholder="请输入规格型号"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="getDataList()">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => {this.queryParam = {}}">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="modalClick($event,'','add')">新建</a-button>
      </div>
      <!--表格部分-->
      <a-table
        :columns="columns"
        :data-source="loadData"
        :loading="loading"
        :pagination="pagination"
        :rowKey="(record)=>record.flOtherResour.infoId"
        @change="nextClick"
      >
        <!--序号-->
        <template v-slot:serial="text,record,index">
          {{ serialNumber(text,record,index) }}
        </template>
        <!--操作-->
        <template v-slot:action="action">
          <a-button @click="modalClick($event,action,'views')" size="small" type="default">查看</a-button>
          &nbsp
          <a-button @click="modalClick($event,action,'edit')" size="small" type="primary">修改</a-button>
          &nbsp
          <a-popconfirm
            title="是否确认删除此条数据?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="handleDel($event,action)"
          >
            <a-button size="small" type="danger">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <a-modal
      :title="modalTitle"
      :visible="modalVisible"
      :width="800"
      @ok="handleOk"
      @cancel="handleCancel">
      <a-form-model
        key="wrongViews"
        ref="ruleForm"
        :model="flOtherResour"
        :rules="rules"
        v-bind="modelObj"
        v-if="modalOptType!='views'"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="name" label="资源编号" prop="resourNum">
              <a-input
                v-model="flOtherResour.resourNum"
                placeholder="请输入资源编号"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="资源名称" prop="resourName">
              <a-input v-model="flOtherResour.resourName" placeholder="请输入资源名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="存贮地点" prop="labsId">
              <a-select
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
                v-model="flOtherResour.labsId"
                @change="handleChange"
                placeholder="请选择存贮地点"
              >
                <a-select-option
                  v-for="(items,name,index) in dictDataMap['fl-labs-room']"
                  :key="index"
                  :value="name">{{items.labsName}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="规格型号" prop="specModel">
              <a-input v-model="flOtherResour.specModel" placeholder="请输入规格型号"/>
            </a-form-model-item>
          </a-col>

<!--          <a-col :span="12">-->
<!--            <a-form-model-item label="计量单位" prop="meteringUnit">-->
<!--              <a-select-->
<!--                placeholder="请选择计量单位"-->
<!--                v-model="flOtherResour.meteringUnit"-->
<!--                show-search-->
<!--                option-filter-prop="children"-->
<!--                :filter-option="filterOption"-->
<!--              >-->
<!--                <a-select-option v-for="(items,name,index) in dictDataMap['warnHandleType']" :key="index" :value="name">-->
<!--                  {{items.text}}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->

          <a-col :span="12">
            <a-form-model-item label="当前数量" prop="currenNum">
              <a-input v-model="flOtherResour.currenNum" placeholder="请输入当前数量"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="计量单位" prop="meteringUnit">
<!--              <a-input v-model="flOtherResour.meteringUnit" placeholder="请输入计量单位"/>-->
              <a-select
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
                placeholder="请选择计量单位"
                v-model="flOtherResour.meteringUnit"
              >
                <a-select-option v-for="(item,name,index) in dictDataMap['unitMeas']" :key="name" :value="name">
                  {{item.text}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="功能备注" prop="remark" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-input v-model="flOtherResour.remark" type="textarea" placeholder="请输入功能备注"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <!--查看-->
      <a-form-model
        key="views"
        :model="flOtherResour"
        v-bind="modelObj"
        v-if="modalOptType=='views'"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="name" label="资源编号">
              <span>{{ flOtherResour.resourNum }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="资源名称">
              <span>{{ flOtherResour.resourName }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="存贮地点">
              <span>{{dictDataMap['fl-labs-room'][this.flOtherResour.labsId].labsName}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="当前数量">
              <span>{{ flOtherResour.currenNum }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="计量单位">
              <span>{{dictDataMap['unitMeas'][this.flOtherResour.meteringUnit].text}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="规格型号">
              <span>{{ flOtherResour.specModel }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="创建人">
              <span>{{ flOtherResour.createUser }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="创建时间">
              <span>{{flOtherResour.createTime}}</span>
            </a-form-model-item>
          </a-col>
<!--          <a-col :span="12">-->
<!--            <a-form-model-item label="负责人员">-->
<!--              <span>{{flOtherResour.userOwnerId}}</span>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="功能描述" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <span>{{flOtherResour.remark}}</span>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <template v-slot:footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk" v-if="!(modalOptType=='views')">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>

  const columns = [
    {
      title: '序号',
      scopedSlots: {customRender: 'serial'}
    },
    {
      title: '资源编号',
      dataIndex: 'flOtherResour.resourNum'
    },
    {
      title: '资源名称',
      dataIndex: 'flOtherResour.resourName'
    },
    {
      title: '规格型号',
      dataIndex: 'flOtherResour.specModel',
    },
    {
      title: '当前数量',
      dataIndex: 'flOtherResour.currenNum',
    },
    {
      title: '计量单位',
      dataIndex: 'flOtherResour.meteringUnit',
      customRender: (val) => {
        return dictDataMap['unitMeas'][val].text
      }
    },
    {
      title: '存贮地点',
      dataIndex: 'flOtherResour.labsId',
      customRender: (val) => {
        return dictDataMap['fl-labs-room'][val].labsName
      }
    },
    {
      title: '创建人',
      dataIndex: 'flOtherResour.createUser'
    },
    {
      title: '创建时间',
      dataIndex: 'flOtherResour.createTime',
      customRender: (text) => moment(text).format('yyyy-MM-DD HH:mm:ss')
    },
    {
      title: '操作',
      scopedSlots: {customRender: 'action'}
    },
  ]
  //数据字典翻译接口方法：
  //1.定义dictDataMap={}
  //2.导入dictDataInit
  //3.mounted() 中调用dictDataInit
  let initFormObj = {}, dictDataMap = {}
  import moment from 'moment'
  import {eachObj, dictDataInit} from '@/utils/util'
  import {getCommonList, getDataCommon, getcommonResUct, getCommonSubmit} from '@/api/manage'

  export default {
    data() {
      return {
        dictDataMap,
        modelObj: {
          labelCol: {span: 8},
          wrapperCol: {span: 16}
        },
        flOtherResour: {
          resourNum: '',////子系统编号
          resourName: '',//资源名称
          orgId: undefined,//所属机构
          deptId: undefined,//所属部门
          currenNum: '',//当前数量
          meteringUnit: undefined,//计量单位
          createUser: '',//创建人
          userId: '',//负责人
          remark: '',//描述
          labsId: undefined,//功能区
          specModel: '',//规格型号
        },
        rules: {
          resourNum: [{required: true, message: '请输入资源编号', trigger: 'blur'}],
          resourName: [{required: true, message: '请输入资源名称', trigger: 'blur'}],
          labsId: [{required: true, message: '请选择存贮地点', trigger: 'change'}],
          meteringUnit: [{required: true, message: '请输入计量单位', trigger: 'blur'}],
          specModel: [{required: true, message: '请输入规格型号', trigger: 'blur'}],
          currenNum: [{required: true, message: '请输入规格型号', trigger: 'blur'}],
        },
        columns,
        loading: true,
        queryParam: {},
        pagination: {
          current: 1,
          total: 0,
          defaultPageSize: 10,
          pageSize: 10,
        },
        loadData: [],
        modalTitle: '修改',
        modalVisible: false,
        modalOptType: 'add',
        formVisible: 'false',
        orgList: [],
        deptList: [],
        // giveListObj: {},
      }
    },
    created() {
      dictDataInit(this.dictDataMap, ['unitMeas',
        {
          pageName: 'fl-labs-room',
          formName: 'searchForm',
          'flLabsRoom.w_infoType': '1',//1功能区 2子系统
          'flLabsRoom.w_sysEname': this.$sysEname,
          dictKey: 'flLabsRoom.infoId',//所在表对象.翻译字段
        }], async (res) => {
        this.getDataList()
        initFormObj = Object.assign({}, this.flOtherResour)
      })
    },
    methods: {
      handleOk() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            const requestParameters = eachObj(this.flOtherResour, 'flOtherResour')
            if (this.modalOptType == 'add') {
              requestParameters.pageName = 'fl-other-resour'
              requestParameters.formName = 'addForm'
              requestParameters['flOtherResour.sysEname'] = this.$sysEname
            } else if (this.modalOptType == 'edit') {
              requestParameters['flOtherResour.w_infoId'] = requestParameters['flOtherResour.infoId']
              requestParameters.pageName = 'fl-other-resour'
              requestParameters.formName = 'editForm'
            }
            getCommonSubmit(requestParameters).then(res => {
              if (res.flag == 'T') {
                this.modalVisible = false
                this.getDataList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        })
      },

      //后台取数据
      getDataList(pagination = {page: 1, rows: 10}) {
        if (pagination.page == 1) {
          this.pagination.current = 1
        }
        this.loading = true
        const requestParameters = Object.assign({
          pageName: 'fl-other-resour',
          formName: 'searchForm',
          orderBy: 'create_time desc',
          'flOtherResour.w_sysEname': this.$sysEname
        }, pagination, this.queryParam)
        getCommonList(requestParameters).then(res => {
          this.loadData = res.rows
          this.loading = false
          this.pagination.total = res.total
        })
      },
      modalClick(e, obj, type) {
        this.modalOptType = type
        switch (type) {
          case 'add':
            this.modalTitle = '新建'
            this.modalVisible = true
            this.flOtherResour = Object.assign({}, initFormObj)//清空列表
            break
          case 'views':
            this.modalTitle = '查看'
            this.modalVisible = true
            this.flOtherResour = obj.flOtherResour
            this.flOtherResour.labsId = obj.flOtherResour.labsId
            break
          case 'edit':
            this.modalTitle = '修改'
            this.modalVisible = true
            this.flOtherResour = Object.assign({}, obj.flOtherResour)
            break
          case 'del':
            break
        }
        this.$nextTick(function () {
          if (this.$refs.ruleForm) {
            this.$refs.ruleForm.clearValidate()//表单置空
          }
        })
      },
      nextClick(pagination, filters, sorter) {
        const pageObj = {
          page: pagination.current,
          rows: pagination.pageSize
        }
        this.pagination.current = pagination.current
        this.pagination.pageSize = pagination.pageSize
        this.getDataList(pageObj)
        // console.log(pagination, filters, sorter);
      },
      handleCancel() {
        this.modalVisible = false
      },
      //删除
      handleDel(e, obj) {
        const id = obj.flOtherResour.infoId
        const requestParameters = {
          pageName: 'fl-other-resour',
          formName: 'delForm',
          'flOtherResour.w_infoId': id

        }
        getCommonSubmit(requestParameters).then(res => {
          if (res.flag == 'T') {
            this.getDataList()
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      serialNumber(text, record, index) {
        index++
        return (this.pagination.current - 1) * this.pagination.pageSize + index
      },
      handleChange(value, option) {
        this.flOtherResour.labsId = value
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
      },
    }
  }

</script>

<style scoped>
  textarea.ant-input {
    resize: none;
  }
</style>